<template>
  <div class="mainPage">
    <div style="color: #ffffff; font-size: 150px; padding-top: 100px; height: 200px">
      <el-icon class="fa fa-soundcloud"/>
      | <small>图荟</small>
    </div>
    <br>
    <div id="text" style="color: #ffffff; font-size: 50px; height: 70px">EASY IMAGE</div>
    <el-button style="margin-top: 30px; height: 45px" color="#444" type="info" @click="enter" round><!-- #083FC9 -->
      <span style="vertical-align: middle; font-size: 20px">进入</span>
      <el-icon class="fa fa-arrow-right" style="vertical-align: middle; margin-left: 5px"/>
    </el-button>
  </div>
  <div style="width:100%;padding-bottom: 100px;"><!--  background-color: #4277F7;--></div>
</template>

<script>
export default {
  name: "MainPage",
  data() {
    return {
      typing_data: {
        i: 0,
        timer: 0,
        index: 0,
        strs: [
            'Easy Image',
            '一个易用的数据集采集平台',
            '致力于让图像采集变得更简单和个性化',
            '我们期待你的加入',
            'Let\'s Make Image Collection Easier~'
        ]
      }
    }
  },
  created() {
    let footer = document.getElementById('footer')
    footer.innerHTML = ""
    document.getElementsByTagName('body')[0].style.minHeight = window.innerHeight+"px"
    // document.getElementsByTagName('body')[0].style.backgroundColor = "#4277F7"
    document.getElementsByTagName('body')[0].style.background = 'linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)'
    // document.getElementsByTagName('body')[0].style.backgroundSize = '400% 400%'
    document.getElementsByTagName('body')[0].style.backgroundSize = 'max(400%, 1300px * 4) max(400%, 1300px * 4)'
    document.getElementsByTagName('body')[0].style.animation = 'Gradient 15s ease infinite'
  },
  mounted() {
    // this.$store.commit("login", "123", "456")
    this.typing ()
  },
  methods: {
    typing () {
      try {
        let divTyping = document.getElementById('text')
        let str = this.typing_data.strs[this.typing_data.index]
        if (this.typing_data.i < str.length) {
          divTyping.innerHTML = str.slice(0, this.typing_data.i++) + '_'
          this.typing_data.timer = setTimeout(this.typing, 100)
        }
        else {
          divTyping.innerHTML = str + '_'//结束打字,移除 _ 光标
          this.typing_data.index ++
          this.typing_data.i = 0
          if (this.typing_data.index >= this.typing_data.strs.length)
            this.typing_data.index = 0
          this.typing_data.timer = setTimeout(this.typing, 400)
        }
      }
      catch(err) {console}
    },
    enter() {
      let that = this;
      let router_target = "PublicDataset";
      that.$router.push({
        name: router_target
      })
    }
  }
}
</script>

<style onload>
@keyframes Gradient {
  0% {
    background-position: 0 50%
  }

  50% {
    background-position: max(calc(100% + (1300px - 100vw)), 100%) 50%
  }

  100% {
    background-position: 0 50%
  }
}
</style>

<style scoped>
.mainPage {
  width: 100%;
  height: 100%;
  /*background-color: #4277F7;*/
}
</style>